<template>
    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md">
        <div class="relative w-[80vw] h-[80vh] bg-[#181c24] overflow-hidden shadow-2xl flex flex-row z-9999">
            <!-- 左侧图片区域 8/10 -->
            <div class="flex-[8] flex items-center justify-center p-8 relative bg-[#1a1f2e]">
                <img v-if="currentImage" :src="currentImage" :alt="currentPhoto.title"
                    class="max-h-[60vh] max-w-full shadow-lg object-cover" />
                <!-- 左右切换按钮 -->
                <button v-if="imageCount > 1"
                    class="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-gray-800/70 text-white w-12 h-12 flex items-center justify-center"
                    @click="prevImage" :disabled="currentImageIndex === 0">
                    <i class="el-icon-arrow-left"></i>
                </button>
                <button v-if="imageCount > 1"
                    class="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-gray-800/70 text-white w-12 h-12 flex items-center justify-center"
                    @click="nextImage" :disabled="currentImageIndex === imageCount - 1">
                    <i class="el-icon-arrow-right"></i>
                </button>
            </div>
            <!-- 右侧信息 2/10 -->
            <div class="flex-[2] p-8 flex flex-col justify-between min-w-[260px] max-w-[320px] relative bg-[#23283a]">
                <!-- 关闭按钮 X -->
                <div class="absolute  right-10 cursor-pointer">
                    <el-icon color="#fff" @click="$emit('close')">
                        <Close />
                    </el-icon>
                </div>
                <div class="pt-12">
                    <h2 class="text-2xl font-bold mb-4 text-white truncate">{{ currentPhoto.title }}</h2>
                    <p class="text-base text-gray-300 mb-6 break-words leading-relaxed">{{ currentPhoto.description }}</p>
                    
                    <div class="space-y-3">
                        <div class="flex items-center text-gray-400">
                            <el-icon class="mr-2 text-gray-500">
                                <Calendar />
                            </el-icon>
                            <span class="text-sm font-medium">拍摄日期：{{ currentPhoto.shootDate }}</span>
                        </div>
                        <div class="flex items-center text-gray-400">
                            <el-icon class="mr-2 text-gray-500">
                                <Location />
                            </el-icon>
                            <span class="text-sm font-medium">拍摄地点：{{ currentPhoto.shootLocation }}</span>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 pointer-events-none info-gradient"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { Close, Calendar, Location } from '@element-plus/icons-vue';
import type { PhotoVO } from '@/api/photos';

const props = defineProps<{
    photos: PhotoVO[];
    visible: boolean;
    startIndex?: number;
}>();

const emit = defineEmits(['close']);

const currentIndex = ref(props.startIndex ?? 0);
const currentImageIndex = ref(0);

watch(() => props.visible, (val) => {
    if (val) {
        currentIndex.value = props.startIndex ?? 0;
        currentImageIndex.value = 0;
    }
});

const currentPhoto = computed(() => props.photos[currentIndex.value] || {
    imageUrl: [],
    title: '',
    description: '',
    uploaderName: '',
    shootDate: '',
    shootLocation: '',
    status: 0,
    createdAt: '',
    updatedAt: '',
    photoId: 0,
    userId: 0,
});

const imageCount = computed(() => {
    const url = currentPhoto.value.imageUrl;
    if (Array.isArray(url)) return url.length;
    if (typeof url === 'string' && url) return 1;
    return 0;
});

const currentImage = computed(() => {
    const url = currentPhoto.value.imageUrl;
    if (Array.isArray(url)) {
        return url[currentImageIndex.value] || '';
    } else if (typeof url === 'string') {
        return url;
    }
    return '';
});

const prevImage = () => {
    if (currentImageIndex.value > 0) currentImageIndex.value--;
};
const nextImage = () => {
    if (currentImageIndex.value < imageCount.value - 1) currentImageIndex.value++;
};
</script>

<style scoped>
.info-gradient {
    background: linear-gradient(120deg, rgba(24, 28, 36, 0.0) 60%, rgba(24, 28, 36, 0.5) 100%);
    z-index: 0;
}
</style>